<template>
  <el-container class="home-container">
    <el-header class="el-header">
      <TopBar />
    </el-header>
    <el-container class="el-container">
      <el-aside width="200px">
        <LeftBar />
      </el-aside>
      <el-main>
        <p>请选择您要查看的图像类别:</p>
        <el-select v-model="selectedCategory" placeholder="请选择" style="width: 200px">
          <el-option
            v-for="category in categories"
            :key="category"
            :label="category"
            :value="category"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="fetchImages">查看</el-button>

        <div v-if="images.length > 0" class="image-container">
          <h3>图像展示:</h3>
          <div class="image-item" v-for="image in images" :key="image.id">
            <img :src="image.url" alt="图像">
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'
import TopBar from '@/components/TopBar'
import LeftBar from '@/components/LeftBar'

export default {
  name: 'ShowListImage',
  components: { TopBar, LeftBar },
  data () {
    return {
      selectedCategory: '',
      categories: ['ambulance', 'apple', 'bear', 'bicycle', 'bird', 'bus', 'cat', 'foot', 'owl', 'pig'],
      images: []
    }
  },
  methods: {
    async fetchImages () {
      const category = this.selectedCategory

      try {
        const response = await axios.post('/api/getListImages', { category })
        const imageData = response.data

        if (imageData.length > 0) {
          this.image = {
            id: 1,
            url: imageData[0].url
          }
        } else {
          this.image = null
        }
      } catch (error) {
        console.error('Error fetching image:', error)
      }
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100%;
  width: 100%;
}

.el-header {
  padding-left: 0;
  margin-left: 0;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 居中对齐 */
  align-items: center; /* 居中对齐 */
  margin-top: 20px;
}

.image-item {
  margin: 10px;
}
</style>
